// 个人中心入口
import React, { useState, useEffect, Suspense } from 'react'
import './index.scss'
import { RouteViewContainer } from '../../../components/router-view/routerview'
import { Layout, Menu, Spin } from 'antd'
import { Switch, Link, RouteComponentProps } from 'react-router-dom'
import { settingRoutes } from '../../../router/routes'
import { SETTING_SIDER_MENU_LIST } from '../../../constants/menu'

const { Content, Sider } = Layout

const ProfileIndex: React.FC<RouteComponentProps> = function ({
  location,
}: RouteComponentProps) {
  const [selectedKeys, setSelectedKeys] = useState('')
  useEffect(() => {
    for (let i = 0; i < SETTING_SIDER_MENU_LIST.length; i++) {
      if (SETTING_SIDER_MENU_LIST[i].path === location.pathname) {
        setSelectedKeys(SETTING_SIDER_MENU_LIST[i].path)
        break
      }
    }
  }, [location.pathname])

  return (
    <Layout className="profile-page">
      <Sider width={170}>
        <Menu
          mode="inline"
          selectedKeys={[selectedKeys]}
          style={{ height: '100%' }}
        >
          {SETTING_SIDER_MENU_LIST.map(item => (
            <Menu.Item key={item.path}>
              <Link to={item.path}>{item.name}</Link>
            </Menu.Item>
          ))}
        </Menu>
      </Sider>
      <Content style={{ padding: '0 50px 0 30px' }}>
        <Suspense
          fallback={
            <Spin
              style={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%,-50%)',
              }}
              size="large"
            />
          }
        >
          <Switch>
            {settingRoutes.map((item, index) => (
              <RouteViewContainer {...item} key={index}></RouteViewContainer>
            ))}
          </Switch>
        </Suspense>
      </Content>
    </Layout>
  )
}

export default ProfileIndex
